<template>
	<view class="pages">
		<view class="form padding">
			<view class="form-line">
				<view class="form-line-text">
					申请人：
				</view>
				<input class="uni-input font-12 disableColor" type="text" placeholder="请输入申请人" v-model="nickName" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					申请部门：
				</view>
				<input class="uni-input font-12 disableColor" type="text" placeholder="请输入申请部门" v-model="deptName" disabled />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					开始地点：
				</view>
				<input class="uni-input font-12" :class="[id > 0 ? 'disableColor' : '']" type="text" placeholder="请输入开始地点" v-model="startLocation" :disabled="id > 0" />
			</view>
			<view class="form-line">
				<view class="form-line-text" style="min-width: 60px;">
					中转地：
				</view>
				<view class="form-line-right" style="flex-wrap: wrap;">
					<view class="tag margin-right-xs margin-bottom-xs margin-top-xs" v-for="(item, index) in transfer" :key="index">
						<view class="text margin-right-xs">
							{{ item }}
						</view>
						<uni-icons type="closeempty" size="12" color="#1890ff" @click="transferDel(index)" v-if="applyId == 0"></uni-icons>
					</view>
					<view class="form-line-btn margin-bottom-xs margin-top-xs" style="height: 30px;" v-if="transfer.length < 3 && applyId == 0">
						<input class="uni-input font-12 transitPlace" type="text" placeholder="请输入中转地" :focus="focus" @blur="blurInput" v-model="transitPlace" width="100px" v-if="transitPlaceStatus" />
						<button class="mini-btn" type="default" size="mini" v-if="transitPlaceStatus == false" @click="transitPlaceEdit">
							<uni-icons type="plusempty" size="12"></uni-icons> 中转地点
						</button>
					</view>
				</view>
			</view>
			<view class="form-line">
				<view class="form-line-text">
					结束地点：
				</view>
				<input class="uni-input font-12" :class="[id > 0 ? 'disableColor' : '']" type="text" placeholder="请输入结束地点" v-model="endLocation" :disabled="id > 0" />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					时间：
				</view>
				<uni-datetime-picker v-model="datetimerange" type="datetimerange" :border="false" :disabled="id > 0" @change="dateChange" />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					占座数：
				</view>
				<input class="uni-input font-12" type="number" maxlength="1" placeholder="请输入占座数" v-model="occupaSeatNum" />
			</view>
			<view class="form-line">
				<view class="form-line-text">
					是否有货物：
				</view>
				<view class="">
					<uni-data-checkbox v-model="current" :localdata="items"></uni-data-checkbox>
				</view>
			</view>
		</view>
		<view class="addBtn">
			<button type="primary" @click="add()" style="width: 400upx;border-radius: 60upx;">{{ id > 0 ? '编 辑' : '预 约' }}</button>
		</view>
		<MyTabBar active="make"></MyTabBar>
	</view>
</template>

<script>
	import { applyCar,editApplyCar,getInfoApply } from '@/api/system/stroke'
	import { getList as getDriverList } from '@/api/system/driver'
	import { getList as getVehicleList } from '@/api/system/vehicle'
	import storage from '@/utils/storage'
	import { parseTime } from '@/utils/common'
	export default{
		data(){
			return {
				id: 0, // 行程id
				applyId: 0, // 申请id
				nickName: '',
				deptName: '',
				current: 0,
				items: [
					{value: 0, text: '没有', disable: false},
					{value: 1, text: '有', disable: false},
				],
				datetimerange: '',
				startLocation: '',
				endLocation: '',
				occupaSeatNum: 1,
				remainderSeatNum: 0, // 未占座数
				maxOccupaSeatNum: 6,
				transitPlace: '',
				transitPlaceStatus: false,
				focus: false,
				queryStatus: false,
				driverStatus: true,
				vehicleStatus: true,
				transfer: [] // 中转地
			}
		},
		onLoad(options) {
			if(storage.get('vuex_user')){
				this.nickName = storage.get('vuex_user').nickName;
				this.deptName = storage.get('vuex_user').dept.deptName;
			}
			
			if(options.id){
				this.id = options.id;
				this.items.map(item => {
					return item.disable = true;
				});
				
				this.remainderSeatNum = parseInt(options.remainderSeatNum);
				
				this.getData();
			}
		},
		methods: {
			dateChange(e){
				console.log('时间' , e);
				if(e && e.length){
					let month = parseTime(e[0] , '{y}-{m}-{d}');
					getDriverList(month).then(res => {
						console.log('司机列表' , res);
						
						if(res.data.length == 0){
							this.driverStatus = false;
							this.queryStatus = true;
							this.$modal.msg('该时间段没有空闲司机，请选择其他时间！');
						}else{
							this.driverStatus = true;
							this.queryStatus = false;
							
							getVehicleList(month).then(res => {
								console.log('车辆列表' , res);
								
								if(res.data.length == 0){
									this.vehicleStatus = false;
									this.queryStatus = true;
									this.$modal.msg('该时间段没有空闲车辆，请选择其他时间！');
								}else{
									this.vehicleStatus = true;
									this.queryStatus = false;
								}
							});
						}
					});
				}else{
					this.driverStatus = true;
					this.vehicleStatus = true;
					this.queryStatus = false;
				}
			},
			/**
			 * 输入框光标离开
			 * @param {Object} e
			 */
			blurInput(e){
				if(this.transitPlace){
					this.transfer.push(this.transitPlace);
				}
				
				this.transitPlaceClose();
			},
			/**
			 * 删除中转地
			 * @param {Object} index
			 */
			transferDel(index){
				this.transfer = this.transfer.filter((t , i) => i != index)
			},
			/**
			 * 添加中转地
			 */
			transitPlaceEdit(){
				this.focus = true;
				this.transitPlaceStatus = true;
			},
			/**
			 * 关闭中转地输入
			 */
			transitPlaceClose(){
				this.transitPlace = '';
				this.focus = false;
				this.transitPlaceStatus = false;
			},
			/**
			 * 获取约车详情
			 */
			getData(){
				this.$modal.loading("请求中");
				getInfoApply(this.id).then(res => {
					this.$modal.closeLoading();
					console.log('获取详情成功' , res);
					
					this.applyId = res.data.id;
					this.startLocation = res.data.startLocation;
					this.endLocation = res.data.endLocation;
					this.occupaSeatNum = res.data.occupaSeatNum;
					this.maxOccupaSeatNum = parseInt(this.occupaSeatNum) + this.remainderSeatNum;
					this.current = parseInt(res.data.isGoods);
					this.datetimerange = [res.data.startTime, res.data.endTime];
					
					res.data.transitPlace.forEach(item => {
						this.transfer.push(item);
					});
				}).catch(err => {
					console.log('获取详情失败' , err);
				});
			},
			/**
			 * 添加
			 */
			add(){
				if(this.applyId > 0){
					if(this.occupaSeatNum <= 0){
						this.$modal.msgError("请输入占座数");
					}else if(this.occupaSeatNum > this.maxOccupaSeatNum){
						this.$modal.msgError(`占座数不能大于${this.maxOccupaSeatNum}位`);
					}else if(!this.queryStatus){
						this.queryStatus = true;
						this.$modal.loading("请求中");
						
						this.handleEdit({
							id: this.applyId,
							occupaSeatNum: this.occupaSeatNum
						});
					}
				}else{
					if(!this.startLocation){
						this.$modal.msgError("请输入开始地点");
					}else if(!this.endLocation){
						this.$modal.msgError("请输入结束地点");
					}else if(!this.datetimerange){
						this.$modal.msgError("请选择时间");
					}else if(new Date(this.datetimerange[0]) < new Date()){
						this.$modal.msgError("开始时间不能小于当前时间");
					}else if(!this.driverStatus || !this.vehicleStatus){
						this.$modal.msgError('该时间段没有司机或车辆，请选择其他时间');
					}else if(this.occupaSeatNum <= 0){
						this.$modal.msgError("请输入占座数");
					}else if(this.occupaSeatNum > this.maxOccupaSeatNum){
						this.$modal.msgError("占座数不能大于6位");
					}else if(!this.queryStatus){
						this.queryStatus = true;
						
						let params = {
							startLocation: this.startLocation,
							endLocation: this.endLocation,
							startTime: this.datetimerange[0],
							endTime: this.datetimerange[1],
							occupaSeatNum: this.occupaSeatNum,
							isGoods: this.current,
							transitPlace: this.transfer,
						};
						
						this.$modal.loading("请求中");
						this.handleAdd(params);
					}
				}
			},
			/**
			 * 修改处理
			 * @param {Object} params
			 */
			handleEdit(params){
				editApplyCar(params).then(() => {
					this.queryStatus = false;
					this.$modal.closeLoading();
					
					this.$modal.msgSuccess('修改成功' , () => {
						setTimeout(() => {
							this.$tab.redirectTo('/pages/index');
						} , 2000);
					});
				}).catch(err => {
					console.log('修改失败' , err);
				});
			},
			/**
			 * 处理约车
			 * @param {Object} params
			 */
			handleAdd(params){
				applyCar(params).then(() => {
					this.queryStatus = false;
					this.$modal.closeLoading();
					
					this.$modal.msgSuccess('预约成功，请等待审核结果' , () => {
						setTimeout(() => {
							this.$tab.redirectTo('/pages/index');
						} , 2000);
					});
				}).catch(err => {
					console.log('约车失败' , err);
				});
			},
			/**
			 * 添加中转地
			 */
			addTransfer(){
				if(this.transfer.length < 3){
					this.transfer.push({name: ''});
					console.log('添加中转地' , this.transfer);
				}
			},
			/**
			 * 删除指定的中转地
			 * @param {Object} index
			 */
			delTransfer(index){
				this.transfer.splice(index , 1);
				console.log('删除指定的中转地' , this.transfer);
			},
			radioChange(e){
				this.current = e.detail.value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flexCenter {
		display: flex;
		align-items: center;
	}
	
	.flexCenterBetween {
		@extend .flexCenter;
		justify-content: space-between;
	}
	
	.form {
		background-color: #FFFFFF;
	
		.form-line {
			@extend .flexCenter;
			padding: 20upx 0upx;
			border-bottom: 1px solid #E2E2E2;
			
			.form-line-right{
				@extend .flexCenter;
			}
			
			.tag{
				@extend .flexCenter;
				
				height: 30px;
				line-height: 30px;
				padding: 0px 10px;
				background-color: #e8f4ff;
				border: 1px solid #d1e9ff;
				color: #1890ff;
				border-radius: 4px;
			}
			
			.uni-input{
				flex: 1;
			}
			
			.transitPlace{
				width: 98px;
				height: 30px;
				border: 1px solid #409EFF;
				border-radius: 5px;
				padding: 0px 5px;
				flex: none;
			}
			
			&:last-child{
				border: none
			}
		}
		
		.title{
			@extend .flexCenterBetween;
			border-bottom: 1px solid #E2E2E2;
		}
	}
	
	.radios{
		@extend .flexCenter;
	}
	
	
	::v-deep .uni-label-pointer{
		@extend .flexCenter;
	}
	
	::v-deep .uni-date-x .icon-calendar{
		display: none;
	}
	
	::v-deep .uni-date__x-input{
		padding-left: 0px;
	}
	
	.addBtn {
		width: 400upx;
		margin: 100upx auto;
	}
</style>